<template>
  <div class="product flex">
    <van-loading
      v-if="!sideList.length"
      type="spinner"
      color="#3a77d9"
      size="30px"
      vertical
      text-color="#3a77d9">
        加载中...
    </van-loading>
    <div v-else>
      <div
        class="product-title"
        v-for="(item, index) in sideList"
        :key="index">
        <!-- 标题 -->
        <div class="product-title-box">
          <div class="product-title-text">{{item.lName}}</div>
        </div>
        <!-- 分类 -->
        <ul
          v-if="item.lzWebProductLevel2Dos.length"
          class="product-content">
          <li
            v-for="(sub, subIndex) in item.lzWebProductLevel2Dos"
            :key="subIndex"
            :style="colorRecord(item.lName, subIndex)"
            @click="gotoProductList(item.lName, item.lzWebProductLevel2Dos, subIndex)"
          >
            {{ sub.lName }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { findProductall } from '@/api/index'
export default {
  name: 'knowProduct',
  created() {
    this.getSideList()
  },
  data() {
    return {
      sideList: [],
      classify: {
        name: '', // 点击的分类名称
        indexes: '' // 点击分类的索引
      }
    }
  },
  methods: {
    // 添加背景色
    colorRecord(lName, index) {
      const { name, indexes } = this.classify
      if (name === lName && Number(indexes) === index) {
        return {
          'background-color': '#6287bf'
        }
      }
      return ''
    },

    /* 跳转到哪个页面 */
    gotoProductList(name, item, index) {
      // 记录点击后的背景颜色参数，用于判断
      this.classify.name = name
      this.classify.indexes = index
      if (name === '仪器设备') {
        this.$router.push('/detail');
        sessionStorage.setItem('productInfo', JSON.stringify(item[index].lzWebProductDo[0]))
        return
      }
      sessionStorage.setItem('productList', JSON.stringify({list: item, pageName: name}))
      this.$router.push({
        name: 'product',
        params: {
          current: index,
          pageName: name
        }
      })
    },

    // 获取分类数据
    async getSideList() {
      try {
        const res = await findProductall()
        this.sideList = res
      } catch (err) {
        console.log(err);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .product {
    min-height: 607px;
    background-color: #f2f2f2;
    position: relative;
    padding: 40px 25px 0;
    .product-title {
      text-align: center;
      margin-bottom: 30px;

      .product-title-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        img {
          width: 32px;
          height: 32px;
          margin-right: 5px;
        }
      }

      /* 内容部分 */
      .product-content {
        // padding: 0 20px;
        li {
          width: 320px;
          height: 48px;
          line-height: 48px;
          margin-bottom: 4px;
          color: #fff;
          font-size: 16px;
          padding: 0 20px;
          background-color: #3a77d9;
          border-radius: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .product-content  li:last-child{
        border: none;
      }

      /* 标题部分 */
      .product-title-item {
        width: 100%;
        height: 50px;
      }
      .product-title-text {
        font-size: 24px;
        font-weight: 700;
        color: #1a1a1a;
      }
    }

  }
</style>
